<template>
  <view class="home ldBg">
    <view style="width: 100%; height: 3vh; display: flex; align-items: center">
      <image
        src="../../static/logo.png?v1"
        style="width: 160rpx; height: 30rpx; margin-left: 2%"
      ></image>
    </view>

    <view class="home_head">
      <view class="head_title"> {{title}}  </view>
      <!-- <image src="../../static/home.png" style="width: 100%; height: 100%;"></image> -->
    </view>
    <view class="card first_card ldBg">
      <view class="iconContent">
        <view class="icon_title icon_first" @click="toCollect">
          <uni-icons
            type="folder-add-filled"
            size="60"
            color="#ff9933"
          ></uni-icons>
          <view class="icon_txt">我的收藏</view>
        </view>
        <view class=" ">
          <view class="circle-effect" @click="toExamList">
            <view class="circle-text">
              <text class="n"> 正式考试 </text>
              <!-- <uni-badge text="1" type="success" class="num"/> -->
            </view>
          </view>
        </view>
        <view class="icon_title icon_first" @click="toErr">
          <uni-icons type="clear" size="60" color="#fd3e1c"></uni-icons>
          <view class="icon_txt">我的错题</view>
        </view>
      </view>

      <view class="iconContent">
        <view class="icon_title icon_first" @click="toExexList">
          <uni-icons type="wallet-filled" size="60" color="#32C7CD"></uni-icons>
          <view class="icon_txt">专项练习</view>
        </view>
        <view class=" ">
          <view class="circle-effect circle-color1" @click="toMockExam">
            <view class="circle-text">
              <text class="n"> 模拟考试 </text>
            </view>
          </view>
        </view>
        <view class="icon_title icon_first" @click="toData">
          <uni-icons type="map-filled" size="60" color="#32C7CD"></uni-icons>
          <view class="icon_txt">基础练习</view>
        </view>
      </view>
    </view>
    <view class="home-bulletin">
      <cc-noticeBar
        v-if="bulletinList.length"
        :noticeList="bulletinList"
        @click="toBulletinDetail"
      ></cc-noticeBar>
    </view>

    <uni-popup ref="myPopup" type="dialog">
      <!-- 弹窗内容 -->
      <uni-popup-dialog
        @close="closefn"
        @confirm="confirm"
        title="修改初始密码"
      >
       <view class="content">
        您的密码为初始密码，是否进行修改?
       </view>
        
      </uni-popup-dialog>
    </uni-popup>

  </view>

</template>

<script lang="ts" setup>
import { ref, reactive, watchEffect, onMounted,nextTick  } from "vue";
import { useUserStore } from "@/stores/user";
import { noticStore } from "@/stores/notic";
import { onLoad, onReady,onPullDownRefresh, onShow } from "@dcloudio/uni-app";
import http from "@/utils/request.js";
import { Bulletin, MyExam, MyExer } from "@/ts";

// 属性定义
const userStore = useUserStore();
const noticFn = noticStore();
const statis = reactive({
  // 首页统计
  jxZsExam: 0, // 正在正式考试数量
  jxMockExam: 0, // 正在模拟考试数量
  allMockExam: 0, // 总模拟考试数量
  allZsExam: 0, // 总正式考试数量
  resource: 0, // 资源数量
});
const todoExamList = ref([] as MyExam[]); // 未完成考试列表
const todoExerList = ref([] as MyExer[]); // 未完成练习列表
const bulletinList = ref([] as Bulletin[]); // 公告列表
const myPopup = ref(null);
const title = ref("");
// 页面加载完毕，执行如下方法
onShow(async () => {
  statisQuery();
  bulletinQuery();
  uni.setNavigationBarTitle({
    title: "",
  });
  await nextTick();
  if (userStore.isInit) {
    myPopup.value.open("");
    userStore.isInit = false;
  }
});

// 页面加载完毕，执行如下方法
onLoad(async () => {
  if (!userStore.accessToken) {
    uni.redirectTo({ url: "/pages/login/login" });
    return;
  }
  title.value = window.server.title
});

onPullDownRefresh(() => {
  bulletinQuery();
  statisQuery();
});
watchEffect(() => {
  if (bulletinList.value.length === 0) {
    bulletinList.value.push({
      id: 0,
      title: "暂无公告",
      content: "暂无公告",
      startTime: null,
      endTime: null,
    });
  } else {
    //当公告列表不为空时，清空id为0的公告
    bulletinList.value = bulletinList.value.filter((item) => item.id !== 0);
  }
});
const closefn = () => {
  myPopup.value.close();
  //清空反馈内容
};
const confirm = () => {
  myPopup.value.close();
  uni.navigateTo({ url: `/pages/my/pwd` });
  //清空反馈内容
};
// 统计查询
async function statisQuery() {
  let { data, code } = await http.post("search/homeStat", {}); // 首页统计
  if (code) uni.stopPullDownRefresh();
  statis.jxZsExam = data.jxZsExam;
  statis.jxMockExam = data.jxMockExam;
  statis.allMockExam = data.allMockExam;
  statis.allZsExam = data.allZsExam;
  statis.resource = data.resource;
  //如果模拟考试和正式考试数量加起来超过10，就显示小红点
  if (statis.jxZsExam > 0) {
    uni.setTabBarBadge({
      index: 1,
      text: statis.jxZsExam,
    });
  } else {
    uni.removeTabBarBadge({
      index: 1,
    });
  }
  // 如果有正式考试，而且没有id为-1的公告，就添加id为-1的公告
  if (statis.jxZsExam && !bulletinList.value.find((item) => item.id === -1)) {
    bulletinList.value.push({
      id: -1,
      title: `有${statis.jxZsExam}场正式考试可以参加`,
      content: "暂无公告",
      startTime: null,
      endTime: null,
    });
  } else if (!statis.jxZsExam) {
    // 如果没有正式考试，就清空id为-1的公告
    bulletinList.value = bulletinList.value.filter((item) => item.id !== -1);
  }

  if (statis.jxMockExam && !bulletinList.value.find((item) => item.id === -2)) {
    bulletinList.value.push({
      id: -2,
      title: `有${statis.jxMockExam}场模拟考试可以参加`,
      content: "暂无公告",
      startTime: null,
      endTime: null,
    });
  } else if (!statis.jxMockExam) {
    // 如果没有模拟考试，就清空id为-2的公告
    bulletinList.value = bulletinList.value.filter((item) => item.id !== -2);
  }
}

// 公告查询
async function bulletinQuery() {
  let { data, code } = await http.post("bulletin/listpage", { pageSize: 100 }); // 公告查询
  if (code) uni.stopPullDownRefresh();
  bulletinList.value.push(...data.list);
  // 公告id去重
  bulletinList.value = bulletinList.value.filter(
    // 过滤掉id重复的公告
    (item, index, self) => self.findIndex((t) => t.id === item.id) === index
  );
}

// 去考试
async function toExam(myExam: any) {
  let examStartTime = new Date(myExam.examStartTime.replaceAll("-", "/"));
  let { data } = await http.post("login/sysTime", {});
  let curTime = new Date(data.replaceAll("-", "/"));
  if (curTime.getTime() < examStartTime.getTime()) {
    uni.showToast({ title: "考试未开始，请等待...", icon: "none" });
    return;
  }

  uni.navigateTo({ url: `/pages/myExam/myExamPage?examId=${myExam.examId}` });
}
async function centerP() {
  uni.switchTab({
    url: "/pages/my/my",
  });
}
// 去考试列表
async function toExamList() {
  uni.switchTab({
    url: `/pages/myExam/myExam`,
  });
}
// 去模拟考试
async function toMockExam() {
  const examUnStartList = await http.post("myExamMock/publishEx");
  if (examUnStartList.code == 200) {
    uni.navigateTo({
      url: `/pages/myMock/myMockPage?exerId=${examUnStartList.data}`,
    });
  } else {
    uni.showToast({ title: examUnStartList.msg, icon: "none" });
  }
}

// 去练习列表
async function toExexList() {
  uni.navigateTo({
    url: "/pages/myExer/myExer",
  });
}
async function toData() {
  uni.navigateTo({
    url: "/pages/myBase/myBase",
  });
}
async function toCollect() {
  uni.navigateTo({
    url: "/pages/myCollect/myCollect",
  });
}
async function toErr() {
  uni.navigateTo({
    url: "/pages/myErr/myErr",
  });
}

// 去练习
async function toExer(myExer: any) {
  let startTime = new Date(myExer.startTime.replaceAll("-", "/"));
  let { data } = await http.post("login/sysTime", {});
  let curTime = new Date(data.replaceAll("-", "/"));
  if (curTime.getTime() < startTime.getTime()) {
    uni.showToast({ title: "练习未开始，请等待...", icon: "none" });
    return;
  }

  uni.navigateTo({ url: `/pages/myExer/myExerPage?exerId=${myExer.id}` });
}

// 去查看公告
function toBulletinDetail(bulletin: Bulletin) {
  if (bulletin.id > 0) {
    // 打印触发两次，等作者修复
    uni.navigateTo({ url: `/pages/bulletin/bulletinDetail?id=${bulletin.id}` });
  } else if (bulletin.id === -1) {
    noticFn.tabIndex = 0;
    toExamList();
  } else if (bulletin.id === -2) {
    noticFn.tabIndex = 1;
    toExamList();
  }
}
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  height: 100%;
  .home_head {
    background-color: #24b0fb;
    width: 100%;
    height: 25vh;
    .head_title {
      color: #fff;
      font-size: 65rpx;
      text-align: center;
      align-items: center;
      margin-top: 5vh;
      justify-content: center;
      font-weight: 800;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
      transform: scale(0.9, 1);
    }
  }

  .icon_title {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .icon_first {
    width: 120rpx;
    .icon_txt {
      font-size: 25rpx;
    }
  }
  .iconContent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 40rpx;
    margin-right: 40rpx;
  }
  .iconBottom {
    margin-top: 6.5vh;
  }
  .circle-effect {
    position: relative;
    width: 260rpx; /* 可以设置为任意大小 */
    height: 260rpx;
    border: 8rpx solid rgba(255, 255, 255, 0.1);
    border-radius: 50%; /* 圆形使用 50% 的边框半径 */
    background-color: #24b0fb;
    display: flex; /* 居中文本 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0rpx 0rpx 10rpx 3rpx rgba(192, 232, 253); /* 特效：亮蓝色的发光边框 */
    transition: transform 0.5s; /* 动态特效 */
    overflow: hidden; /* 确保所有内容都在圆内 */
    // .test_num {
    //   font-size: 45rpx;
    //   color: #fff;
    // }
  }
  .circle-color1 {
    background-color: #32c7cd;
    box-shadow: 0rpx 0rpx 10rpx 3rpx #32c7cd;
  }
  .circle-text {
    color: #ffffff;
    text-align: center;
    font-size: 45rpx; /* 根据你的文字内容和圆的大小来调整 */
    font-weight: bold;
    position: relative;
    .num {
      position: absolute;
      top: -18rpx;
      right: -32rpx;
    }
  }
  /* 卡片圆角 阴影效果*/
  .card {
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
  }
  /* 居中显示*/
  .first_card {
    height: 60vh;
    margin-top: -8vh;
    width: 86%;
    margin-left: 7%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-bottom: 10rpx;
  }
  .secend_card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    overflow-y: auto;
  }
  .data_card {
    width: 45%;
    height: 180rpx;
    margin: 2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #24b0fb;
    color: #fff;
    .data_num {
      font-size: 40rpx;
    }
  }
  .data_card_title {
    display: flex;
    align-items: center;
  }
  //超出换行居中显示
  .data_card_txt {
    text-align: center;
    font-size: 24rpx;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-bulletin {
    border-radius: 20rpx; /* 圆形使用 50% 的边框半径 */
    background-color: #ebebeb; /* 用稍深的灰色背景提供对比，使公告栏突出 */
    width: 86%;
    height: 7vh;
    margin-left: 7%;
    margin-bottom: 1vh;
    margin-top: 1vh;
  }
  .notice {
    margin: 0;
    width: 97%;
    border-radius: 20rpx;
    height: 100%;
    flex: auto;
    display: flex;
    align-items: center;
  }
  ::v-deep .left_icon {
    width: 10%;
    float: left;
    height: 60rpx;
    padding-top: 0;
  }
  ::v-deep .notice_swiper .sw_item .sw_text[data-v-cb0e24a8] {
    font-size: 25rpx;
    color: #000;
    display: inline-block;
    line-height: 2.5rem;
  }

  .home-top {
    background-color: #ffffff; /* 对顶部菜单使用白色背景 */
    height: 180rpx;
    flex: inherit;

    .home-top-menu {
      flex: 1;
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 30rpx 0;
      .uni-icons {
        color: #0088cc; /* 对图标使用更深的颜色使它们更显眼 */
      }

      .home-top-menu-image {
        width: 50rpx;
        height: 50rpx;
      }

      .home-top-menu-text {
        font-size: 28rpx;
        margin-top: 10rpx;
        color: #333333; /* 对文本使用深色以便在浅色背景上看清 */
      }

      .home-top-menu-num {
        position: absolute;
        top: 10rpx;
        right: 30rpx;
      }
    }
  }

  .home-bottom {
    flex: 1;
    display: flex;
    flex-direction: column;
    .home-bottom-exam {
      height: calc((100vh - 700rpx) / 2);
    }
    .home-bottom-exer {
      height: calc((100vh - 700rpx) / 2);
    }

    .chat-custom-right {
      flex: 1;
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
    }

    .chat-custom-text {
      font-size: 24rpx;
      color: #999;
    }
    .uni-list-item {
      background-color: #ffffff; /* 为列表条目使用白色背景 */
      color: #333333; /* 文本使用深色以便在白色背景上看清 */
    }

    .kevy-empty {
      color: #666666; /* 使用中等灰度的颜色以突出 "暂无数据" 文本 */
    }
  }
  .test_num {
    font-size: 30rpx; /* 设置字体大小 */
    color: #ffffff; /* 字体颜色 */
    border-radius: 50%; /* 边界半径为50%，形成圆形 */
    width: 68rpx; /* 宽度 */
    height: 68rpx; /* 高度 */
    display: flex; /* display为flex */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
    text-align: center; /* 文字居中对齐 */
    margin-bottom: 6rpx;
  }
}
</style>